<div class="bg-white py-6 sm:py-8 lg:py-12">
  <div class="mx-auto max-w-screen-lg px-4 md:px-8">
    <!-- text - start -->
    <div class="mb-10 md:mb-16">
      <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">
        Choose a Bundle
      </h2>

      <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">
        This is a section of some simple filler text, also known as placeholder text. It shares some
        characteristics of a real written text but is random or otherwise generated.
      </p>
    </div>
    <!-- text - end -->

    <div class="flex flex-wrap items-center justify-center gap-4 sm:gap-0">
      <!-- left side - start -->
      <div class="w-full rounded-lg bg-gray-800 p-6 sm:w-1/2 sm:rounded-r-none sm:p-8 lg:w-1/3">
        <div class="mb-4">
          <h3 class="text-2xl font-semibold text-gray-100 sm:text-3xl">Basic Bundle</h3>
          <p class="text-gray-300">Ebook</p>
        </div>

        <div class="mb-4 space-x-2">
          <span class="text-4xl font-bold text-gray-100">$29</span>
          <span class="text-2xl text-gray-300 line-through">$49</span>
        </div>

        <ul class="mb-6 space-y-2 text-gray-300">
          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Ebook</span>
          </li>
          <!-- feat - end -->

          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Multiple examples</span>
          </li>
          <!-- feat - end -->

          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Basic support</span>
          </li>
          <!-- feat - end -->
        </ul>

        <a
          href="#"
          class="
            block
            rounded-lg
            bg-gray-500
            px-8
            py-3
            text-center text-sm
            font-semibold
            text-gray-100
            outline-none
            ring-indigo-300
            transition
            duration-100
            hover:bg-gray-600
            focus-visible:ring
            active:text-gray-300
            md:text-base
          "
          >Get the Basic Bundle</a
        >
      </div>
      <!-- left side - end -->

      <!-- right side - start -->
      <div
        class="
          w-full
          rounded-lg
          bg-gradient-to-tr
          from-indigo-500
          to-violet-400
          p-6
          shadow-xl
          sm:w-1/2
          sm:p-8
        "
      >
        <div class="mb-4 flex flex-col items-start justify-between gap-4 lg:flex-row">
          <div>
            <h3 class="text-2xl font-semibold text-white sm:text-3xl">Pro Bundle</h3>
            <p class="text-indigo-100">Ebook + Video course</p>
          </div>

          <span
            class="
              order-first
              inline-block
              rounded-full
              bg-indigo-200 bg-opacity-50
              px-3
              py-1
              text-xs
              font-semibold
              uppercase
              tracking-wider
              text-white
              lg:order-none
            "
            >Best value</span
          >
        </div>

        <div class="mb-4 space-x-2">
          <span class="text-4xl font-bold text-white">$49</span>
          <span class="text-2xl text-indigo-100 line-through">$89</span>
        </div>

        <ul class="mb-6 space-y-2 text-indigo-100">
          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Ebook</span>
          </li>
          <!-- feat - end -->

          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Video course</span>
          </li>
          <!-- feat - end -->

          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Multiple examples</span>
          </li>
          <!-- feat - end -->

          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Work sheets</span>
          </li>
          <!-- feat - end -->

          <!-- feat - start -->
          <li class="flex items-center gap-1.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd"
              />
            </svg>

            <span>Premium support</span>
          </li>
          <!-- feat - end -->
        </ul>

        <a
          href="#"
          class="
            block
            rounded-lg
            bg-indigo-200 bg-opacity-50
            px-8
            py-3
            text-center text-sm
            font-semibold
            text-white
            outline-none
            ring-indigo-300
            transition
            duration-100
            hover:bg-indigo-300
            focus-visible:ring
            active:bg-indigo-400
            md:text-base
          "
          >Get the Pro Bundle</a
        >
      </div>
      <!-- right side - end -->
    </div>
  </div>
</div>
